<!--  -->
<template>
<div class='student-page'>
  <c-title :text="dyTitle" :hide="false" ></c-title>
  <div class="applyForm-main">
    <van-form   >
      <van-cell-group :border="false">
        <van-field 
          label="学员姓名" 
          label-class="account-label" 
          placeholder="请填写学生姓名" 
          required 
          v-model="formQuery.relation_name"
          >
        </van-field>
        <van-field 
          label="出生日期" 
          label-class="account-label"
          required 
          placeholder="请选择出生日期"
          v-model="formQuery.birthday"
          @click.stop="dateShow = true;" 
          readonly>
          <template #right-icon >
            <span class="iconfont icon-icon_more11"></span>
          </template>
        </van-field>
        <van-field 
          label="性别" 
          label-class="account-label" 
          placeholder="请选择性别" 
          required
          readonly
          @click.stop="sexShow = true;" 
          v-model="sexName"
          >
          <template #right-icon >
            <span class="iconfont icon-icon_more11"></span>
          </template>
        </van-field>
        <van-field 
          label="学校" 
          label-class="account-label" 
          placeholder="请填写就读学校名称"
          required
          v-model="formQuery.school"
          clearable
          >
        </van-field>
        <van-field 
          label="班级" 
          label-class="account-label" 
          placeholder="请填写班级名称" 
          required 
          v-model="formQuery.school_class"
          clearable
          >
        </van-field>
        <van-field 
          label="地区" 
          label-class="account-label" 
          placeholder="请选择地区" 
          required
          readonly 
          v-model="addressName"
          @click.stop="addressShow = true"
          clearable
          >
          <template #right-icon >
            <span class="iconfont icon-icon_more11"></span>
          </template>
        </van-field>
        <van-field 
          label="所在街道：" 
          label-class="account-label" 
          placeholder="请选择街道" 
          required
          v-if="strShow  && !region_hide" 
          v-model="streetName"
          clearable
          @click="streetShowbtn"
          >
          <template #right-icon >
            <span class="iconfont icon-icon_more11"></span>
          </template>
        </van-field>
        <van-field 
          label="居住地址" 
          label-class="account-label" 
          placeholder="请填写详细地址" 
          required 
          v-model="formQuery.address"
          clearable
          >
        </van-field>
        
      </van-cell-group>
      <div  class="account-btn"  :style="iPnoneBottomBol ? 'padding-bottom: 34px;' : ''">
        <!--var(--themeBaseColor)-->
        <van-button round block type="info" native-type="submit" color="var(--themeBaseColor)" @click="studentConfirm">提交</van-button>
      </div>
    </van-form>
    <van-popup v-model="sexShow" position="center"   :style="{ background: 'transparent',width:'80%' }" >
      <div class="sex-main">
        <div class="sex-content">
          <h3 class="sex-title">请选择性别</h3>
          <div class="sex-select flex-j-c">
            <div class="circle" @click.stop="sexChange('male')">
              <div class="flex circle-flex">
                <img :src="host + 'event-registration/male.png'" v-if="!sexChecked" />
                <img :src="host + 'event-registration/male-checked.png'" v-if="sexChecked" />
                <h3>男</h3>
              </div>
            </div>
            <div class="select-desc">或</div>
              <div class="circle" @click.stop="sexChange('girl')">
                <div class="flex circle-flex">
                  <img :src="host + 'event-registration/girl.png'" v-if="!girlChecked" />
                  <img :src="host + 'event-registration/girl-checked.png'" v-if="girlChecked" />
                  <h3>女</h3>
                </div>
              </div>
          </div>
        </div>
        <div class="icon-adsystem_icon_cancle iconfont" @click.stop="sexPopColse"></div>
      </div>
    </van-popup>
    <van-popup v-model="dateShow" position="bottom" :style="{ height: '50%' }" round>
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="选择年月日"
          :min-date="minDate"
          :max-date="maxDate"
          @cancel="dateCancel"
          @confirm="dateConfirm"
          :formatter="formatter"
        />
    </van-popup>
    <yd-cityselect v-model="addressShow" :callback="addressCallback" :items="area"></yd-cityselect>
    <van-popup v-model="streetShow" :style="{ width: '100%', height: '100%', overflow: auto }" position="right" @close="onClose">
      <van-nav-bar title="选择街道" left-text="" right-text="" left-arrow @click-left="treetShowLeft" />
      <div class="content">
        <block v-for="(item, index) in districtVal" :key="index">
          <van-cell :title="item.areaname" @click="streetConfirm(item)" is-link title-style="text-align:left" />
        </block>
      </div>
    </van-popup>
  </div>
</div>
</template>

<script>
import actionStudent_controller from './actionStudent_controller';
export default actionStudent_controller;
</script>
<style lang="scss" scoped>
  
/* @import url(); 引入公共css类 */
  ::v-deep .account-label {
    font-weight: 500;
    font-size: 0.875rem;
    color: #00001C;
  }
  .pcStyle   .account-btn {
    width:23.4375rem;
    left:50%;
    transform: translate(-50%, 0);
  }
  .circle::v-deep .van-radio  {
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,20%);
  }
 .applyForm-main ::v-deep .van-cell {
    padding: 0.9375rem 1rem;
  }
  .wind-form ::v-deep .account-field {
    flex-direction: column;
  }
  .applyForm-main ::v-deep .van-cell:last-child {
    border-radius:  0 0 0.5rem 0.5rem;
  }
  .applyForm-main ::v-deep .van-cell:first-child {
    border-radius:  0.5rem 0.5rem 0 0 ;
  }
  .applyForm-main  ::v-deep .van-cell-group {
    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
  }
  .applyForm-main {
    margin:0.625rem 0.75rem 0 0.75rem;
  }
  .account-btn {
    width:100%;
    background-color: #fff;
    position: fixed;
    left:0;
    bottom:0;
    padding:10px 12px;
  }
  .sex-main {
    background-color: transparent;
    .sex-content {
      padding:1.125rem;
      background: #FFFFFF;
      border-radius: 0.75rem 0.75rem 0.75rem 0.75rem;
      .sex-title {
        font-weight: bold;
        font-size: 1rem;
        color: #00001C;
      }
      .sex-select {
        padding:2rem 0 0.6875rem 0;
        .circle {
          position: relative;
          .circle-flex {
            flex-direction: column;
            h3 {
              font-weight: 500;
              font-size: 0.875rem;
              color: #00001C;
              padding:0.75rem 0 0 0;
            }
          }
          img {
            width: 4.125rem;
            // height: 4.125rem;
            border-radius: 50%;
          }
        }
        .select-desc {
          font-weight: 400;
          font-size: 0.875rem;
          color: #999999;
          padding:1.625rem 1.25rem 0 1.25rem;
        }
      }
    }
    .icon-adsystem_icon_cancle {
      color:#D6D6DC;
      margin:2.1875rem 0 0 0;
      font-size: 2rem;
    }
  }
</style>